<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">商品规格管理</h3>
            </div>
        </div>
        <div class="row">
            <form class="form-horizontal" data-parsley-validate>
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">规格基本信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品规格名称：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="name" class="form-control" placeholder="请输入商品规格名称"
                                                   required>
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品规格类型：</label>
                                        <div class="col-lg-8" id="productSellerList">
                                        	<select class="form-control" id="productType">
					                             <option value="1">尺寸</option>
					                             <option value="2">颜色</option>
					                             <option value="3">款式</option>
					                             <option value="4">加工方式</option>
						                    </select>
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                   <!-- <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品规格基础价格：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="basePrice" class="form-control"
                                                   placeholder="商品规格基础价格">
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                   </div> -->
                                   <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品规格状态：</label>
                                    	<div class="col-lg-8">
	                                        <select class="form-control" id="isActive">
		                                            <option value="0">未激活</option>
		                                            <option value="1">已激活</option>
	                                        </select>
                                    	</div>
                                    	<div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" class="btn btn-primary" onclick="product_create()"
                        style="margin-left:15px;margin-bottom:30px;">发布
                </button>
                <button class="btn btn-default" id="cancel" style="margin-left:15px;margin-bottom:30px;">
                  		  取消
                </button>
            </form>
        </div>
    </div>
</div>
<script>
	var images = [],descs=[];
	var currentI = 0;
	
	function product_create() {
    	var baseURL = "${webPath}/product/createFormat";
    	var productId = "${productId}";
        var name = $('#name').val();
        //var basePrice = $('#basePrice').val();
		var productType = $("#productType").find("option:selected").val();
		var isActive = $("#isActive").find("option:selected").val();

		var json_package = {
			"head" : {},
			"body" : {
				"productId" : productId,
				"name" : name,
				"type" : productType,
				"isActive" : isActive
			}
		};
		$.post(baseURL, {
			"json_package" : JSON.stringify(json_package)
		}, function(result) {
			if (typeof result == 'string')
				result = JSON.parse(result);
			if (result.body.result == '0') {
				alert(result.body.description)
				window.location.href = "${webPath}toProductFormat/"
						+ productId;
			} else {
				alert(result.body.description)
			}
		})
	}

	function closeDiv(i) {
		$("#rewardDiv" + i).remove();
		currentI--;
	}

	function addNewReward() {
		var accountRewardListString = '';
		accountRewardListString += '<div style="border:1px solid gray;padding:10px;border-radius:5px;margin-top:5px;" id="rewardDiv'
				+ (currentI + 1) + '">';
		accountRewardListString += '	<a style="float:right;text-decoration:none;cursor:default" onclick=closeDiv("'
				+ (currentI + 1) + '") >X</a>';
		accountRewardListString += '(一级(单位：%))<input type="text" name="rewardList" class="form-control" value="" placeholder="请输入商品用户一级佣金比例" >';
		accountRewardListString += '(二级(单位：%))<input type="text" name="rewardList2" class="form-control" value="" placeholder="请输入商品用户二级佣金比例" >';
		accountRewardListString += '(单位：天)<input type="text" name="rewardTime" class="form-control" value="" placeholder="请输入商品用户佣金时间" >';
		accountRewardListString += '</div>';
		$("#accountRewardList").append(accountRewardListString);
		currentI++;
	}
	$(function() {
		$('#cancel').click(function() {
			window.location.href = "${webPath}toProduct";
		})
	});
	(function() {
		var attachementList = [], attachementUrl = [];
		var updateUpload = function() {
			$('input[name="attachmentUuid_1"]').val(JSON.stringify({
				attachment : attachementList
			}));
			$('input[name="attachmentUrl_1"]').val(attachementUrl);
			$('input[name="attachmentUrl_1"]').val(images);
		};
		var updateImage = function() {
			if (attachementUrl.length == 0) {
				return

			} else {
				attachementUrl
						.forEach(function(attachment, index) {
							$('#attachmentTag_1')
									.append(
											'<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename"></span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href="+attachment+" data-lightbox="example-set"><img src='
													+ attachment
													+ ' style="width:100%; height:auto;"/ alt="" /></a></div></div></div>')
						})
			}
			$('input[name="attachmentUrl_1"]').val(attachementUrl);
		};
		updateImage();
		var ajaxUpload = new AjaxUpload(
				$('#photoUpload_1'),
				{
					action : '${webPath}/file/uploadImage',
					data : {
						"json_package" : JSON.stringify({
							"head" : {},
							"body" : {
								"file" : "file"
							}
						})
					},
					name : 'file',
					onSubmit : function(file, ext) {
						window.uploading = true;
						$('#photoUpload_1').text('上传中...');
						$('#photoUpload_1').attr('disabled', true);
						this.disable();

					},
					onChange : function(file, extension) {
						this.disable();
					},
					onComplete : function(file, response) {
						var data = JSON.parse(response);
						fileUrl = data.body.fileUrl;
						attachementUrl.push(fileUrl);
						attachementList.push(fileUrl);
						images.push(fileUrl);
						updateUpload();
						var fileName = file.length > 25 ? file.substring(0, 24)
								+ "..." : file;
						$('#attachmentTag_1')
								.append(
										'<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename">'
												+ fileName
												+ ' </span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href=' + fileUrl + ' data-lightbox="example-set"><img src='
												+ fileUrl
												+ ' style="width:100%; height:auto;"/></a></div></div></div>');
						window.uploading = false;
						$('#photoUpload_1').text('上传图片');
						this.enable();
					}
				});
		//setTimeout("ajaxUpload()", 2000);

		$("#attachmentTag_1").on(
				'click',
				".attachment-tag .close",
				function(e) {
					e.stopPropagation();
					var targetTag = $(this).parents('.attachment-tag');
					var order = $("#attachmentTag_1 .attachment-tag").index(
							targetTag);
					if (order > -1) {
						attachementList.splice(order, 1);
						attachementUrl.splice(order, 1);
						images.splice(order, 1);
						updateUpload();
						$(this).parents('.col-lg-3').remove();
					}
					return false
				});
	})();

	(function() {
		var attachementList = [], attachementUrl = [];
		var updateUpload = function() {
			$('input[name="attachmentUuid_2"]').val(JSON.stringify({
				attachment : attachementList
			}));
			$('input[name="attachmentUrl_2"]').val(attachementUrl);
			$('input[name="attachmentUrl_2"]').val(descs);
		};
		var updateImage = function() {
			if (attachementUrl.length == 0) {
				return

			} else {
				attachementUrl
						.forEach(function(attachment, index) {
							$('#attachmentTag_2')
									.append(
											'<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename"></span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href="+attachment+" data-lightbox="example-set"><img src='
													+ attachment
													+ ' style="width:100%; height:auto;"/ alt="" /></a></div></div></div>')
						})
			}
			$('input[name="attachmentUrl_2"]').val(attachementUrl);
		};
		updateImage();
		var ajaxUpload = new AjaxUpload(
				$('#photoUpload_2'),
				{
					action : '${webPath}/file/uploadImage',
					data : {
						"json_package" : JSON.stringify({
							"head" : {},
							"body" : {
								"file" : "file"
							}
						})
					},
					name : 'file',
					onSubmit : function(file, ext) {
						window.uploading = true;
						$('#photoUpload_2').text('上传中...');
						$('#photoUpload_2').attr('disabled', true);
						this.disable();

					},
					onChange : function(file, extension) {
						this.disable();
					},
					onComplete : function(file, response) {
						var data = JSON.parse(response);
						fileUrl = data.body.fileUrl;
						attachementUrl.push(fileUrl);
						attachementList.push(fileUrl);
						descs.push(fileUrl);
						updateUpload();
						var fileName = file.length > 25 ? file.substring(0, 24)
								+ "..." : file;
						$('#attachmentTag_2')
								.append(
										'<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename">'
												+ fileName
												+ ' </span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href=' + fileUrl + ' data-lightbox="example-set"><img src='
												+ fileUrl
												+ ' style="width:100%; height:auto;"/></a></div></div></div>');
						window.uploading = false;
						$('#photoUpload_2').text('上传图片');
						this.enable();
					}
				});
		//setTimeout("ajaxUpload()", 2000);

		$("#attachmentTag_2").on(
				'click',
				".attachment-tag .close",
				function(e) {
					e.stopPropagation();
					var targetTag = $(this).parents('.attachment-tag');
					var order = $("#attachmentTag_2 .attachment-tag").index(
							targetTag);
					if (order > -1) {
						attachementList.splice(order, 1);
						attachementUrl.splice(order, 1);
						descs.splice(order, 1);
						updateUpload();
						$(this).parents('.col-lg-3').remove();
					}
					return false
				});
	})();

	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_3'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_3').text('上传中...');
		        $('#photoUpload_3').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#formatImage").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_3').text('上传图片');
		        this.enable();
		    }
		});
	})();
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_4'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_4').text('上传中...');
		        $('#photoUpload_4').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image5").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_4').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	$(function () {
        $('#startTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
        $('#endingTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
        $('#startTime').datetimepicker();
        $('#endingTime').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#startTime").on("dp.change", function (e) {
            $('#endingTime').data("DateTimePicker").minDate(e.date);
        });
        $("#endingTime").on("dp.change", function (e) {
            $('#startTime').data("DateTimePicker").maxDate(e.date);
        });
    });
	
	$(document).ready(function(e) {
		$('#pro_info').keydown(function() {
			var len = $(this).val().length;
			if (len >= 100) {
				var num = $(this).val().substring(0, 99);
				$(this).val(num);
				alert("超过字数限制")
			}
		})
	});
	$(document).ready(function(e) {
		$('#pro_desc').keydown(function() {
			var len = $(this).val().length;
			if (len >= 140) {
				var num = $(this).val().substring(0, 139);
				$(this).val(num);
				alert("超过字数限制")
			}
		})
	});
</script>
</body>
</html>